<!-- emeet产品数据列表 -->
<template>
    <div class="container">
        <!-- 查询显示区域 -->
        <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="webcam" class="tab-panel">
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="speaker phone" force-render>
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="microphone">
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
        </a-tabs>

        <!-- 内容显示区域：表格数据显示方式，数据导出等 -->
        <a-row class="condition-pannel white-pannel">
            <a-col :span="6">
                <a-button type="primary">
                    产品对比
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary" @click="exportData">
                    数据文件导出
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary">
                    其他条件
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary">
                    查询
                </a-button>
            </a-col>
        </a-row>
        <!-- 内容显示区域（表格） -->
        <a-table :columns="columns" :data-source="data" class="white-pannel table-content" :pagination="pagination" rowKey="index" @expand="handleExpand">
                <!-- 嵌套表格 -->
                <!-- 产品名字，原始价格，save_price, 最终价格， 折扣的文本信息，渠道来源 -->
             <a-table
                slot="expandedRowRender"
                slot-scope="record"
                :columns="innerColumns"
                :data-source="innerData[record.productName]"
                :pagination="false"
                style="background-color:antiquewhite"
            >            
                <!-- 产品缩略图 -->
                <img
                    slot="customRenderImgge"
                    slot-scope="text"
                    alt="example"
                    :src="text"
                    class="grid-image"
                />
                <span slot="productImage"> <a-icon type="smile-o"/> 缩略图 </span>
                <!-- 产品信息 -->
                <span slot="productInfo"><a-icon type="smile-o" />产品信息</span>
                <span slot="customRenderProductInfo" slot-scope="text" class="text-line"><a-tooltip>
                    <template slot="title">
                    {{text}}
                    </template>
                    {{text.slice(0,20) + "..."}}
                </a-tooltip>
                </span>
                <!-- 自定义标签渲染 -->
                <span slot="customRenderTag" slot-scope="text">
                    <a-tag color="blue">
                        {{text}}
                    </a-tag>
                </span>
            </a-table>
            <!-- 序号 -->
            <a slot="customRenderIndex" slot-scope="text" class="product-info">{{ text }}</a>
            <span slot="index"><a-icon type="smile-o" /> #</span>

            <!-- 产品缩略图 -->
            <img
                slot="customRenderImgge"
                slot-scope="text"
                alt="example"
                :src="text"
                class="grid-image"
            />
            <span slot="productImage"> <a-icon type="smile-o"/> 缩略图 </span>

            <!-- 产品信息 -->
            <span slot="productInfo"><a-icon type="smile-o" />产品信息</span>
            <span slot="customRenderProductInfo" slot-scope="text" class="text-line"><a-tooltip>
                <template slot="title">
                {{text}}
                </template>
                {{text.slice(0,20) + "..."}}
            </a-tooltip>
            </span>

            <!-- 产品品牌 -->
            <span slot="productBrand"><a-icon type="smile-o" />品牌</span>
            <span slot="customRenderProductBrand" slot-scope="text">
                <a-tag color="orange">
                    {{text}}
                </a-tag>
            </span>
            <!-- 产品品类 -->
            <span slot="productType"><a-icon type="smile-o" />产品品类</span>
            <span slot="customRenderProductType" slot-scope="text">
                <a-tag color="orange">
                    {{text}}
                </a-tag>
            </span>
            <!-- 产品bsr -->
            <a slot="customRenderProductBsr" slot-scope="text" class="product-info">{{ text }}</a>
            <span slot="productBsr">BSR</span>

            <!-- 产品价格 -->
            <span slot="productPrice">产品价格 </span>
            <span slot="customRenderProductPrice" slot-scope="text">{{text}}</span>

            <!-- 产品评分 -->
            <span slot="productStar">产品评分 </span>
            <span slot="customRenderProductStar" slot-scope="text">{{text}}</span>
            
            <!-- 产品review -->
            <span slot="productReview">review </span>
            <span slot="customRenderProductReview" slot-scope="text">{{text}}</span>

            <!-- 月评新增 -->
            <span slot="productStar">月评新增 </span>
            <span slot="customRenderProductStar" slot-scope="text">{{text}}</span>

            <!-- 产品销量走向图
            <span slot="customVolume"><a-icon type="smile-o"/>价格走向图</span>
            <div slot="volume" slot-scope="data" class="graph_cell">
                <VolumeGraph :x_axis_data="data.x_data" :y_axis_data="data.y_data"/>
            </div> -->
            <!-- 操作 -->
            <span slot="action" slot-scope="record">
                 <a-button type="link" @click="handleClick(record)">
                    查看历史数据
                </a-button>
                <a-button type="link" @click="handleClickReview(record)">
                    查看评论数据
                </a-button>
                 <a-button type="link" @click="handleClickOrigin(record)">
                    查看原始页面
                </a-button>
            </span>
        </a-table>
    </div>
</template>
<script>
// import VolumeGraph from "@/components/echart/volume-graph.vue";
const columns = [

    // 缩略图
    {
        dataIndex: 'productImage',
        // key: 'productImage',
        slots: {title: 'productImage'},
        scopedSlots: {customRender: 'customRenderImgge'},
        width: "60px"
    },
    // 名称
    {title: '产品名', dataIndex: 'productName'},
    // 产品信息
    {
        dataIndex: 'productInfo',
        // key: 'productInfo',
        slots: { title: 'productInfo' },
        scopedSlots: { customRender: 'customRenderProductInfo' },
        width: "180px"
    },
    //产品品牌
    {
        dataIndex: 'productBrand',

        slots: { title: 'productBrand' },
        scopedSlots: { customRender: 'customRenderProductBrand' },
        width: "50px"
    },
    // 产品品类
    {
        dataIndex: 'productType',

        slots: {title: 'productType'},
        scopedSlots: {customRender: 'customRenderProductType'},
        width: "50px"
    },

    // 产品bsr
    {
        dataIndex: 'productBsr',
        slots: {title: 'productBsr'},
        scopedSlots: {customRender: 'customRenderProductBsr'},
        width: "60px"
    },
    // 产品价格
    {
        dataIndex: 'productPrice',

        slots: {title: 'productPrice'},
        scopedSlots: {customRender: 'customRenderProductPrice'},
        width: "120px",
        align: "center",
    },
    // 产品星级（评分）
    {
        dataIndex: 'productStar',

        slots: {title: 'productStar'},
        scopedSlots: {customRender: 'customRenderProductStar'},
        width: "100px",
        align: "center",
    },
    // 产品 product_review
    {
        dataIndex: 'productReview',

        slots: {title: 'productReview'},
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 新增月评
    {
        dataIndex: 'productReviewMonthAdd',

        // slots: {title: 'productReview'},
        title: "新增月评",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 留评率
    {
        dataIndex: 'productReviewLeaveRate',
  
        // slots: {title: 'productReview'},
        title: "留评率",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 问答数
    {
        dataIndex: 'productAnswer',

        // slots: {title: 'productReview'},
        title: "问答数",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 最近30天销售量
    {
        dataIndex: 'productSaleNumLatest30',
     
        // slots: {title: 'productReview'},
        title: "近30天销售量",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 最近30天销售额度
    {
        dataIndex: 'productSaleAmountLatest30',
     
        // slots: {title: 'productReview'},
        title: "近30天销售额",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // product_gross毛利率
    {
        dataIndex: 'productGross',
  
        // slots: {title: 'productReview'},
        title: "毛利率",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 上架时间
    {
        dataIndex: 'productAvailable',
    
        // slots: {title: 'productReview'},
        title: "上架时间",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 卖家数
    {
        dataIndex: 'productSeller',
     
        // slots: {title: 'productReview'},
        title: "上架时间",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 配送费
    {
        dataIndex: 'productWay',

        // slots: {title: 'productReview'},
        title: "卖家数",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

    // 发货方式
    {
        dataIndex: 'productDelivery',
     
        // slots: {title: 'productReview'},
        title: "发货方式",
        scopedSlots: {customRender: 'customRenderProductReview'},
        // width: "100px",
        align: "center",
    },

   
    // 操作
    {
        title: '操作',
        key: '历史数据可视化',
        scopedSlots: { customRender: 'action' },
    },
];

// 产品名字，原始价格，save_price, 最终价格， 折扣的文本信息，渠道来源
const innerColumns = [
    // 缩略图
    {
        dataIndex: 'productImage',
        // key: 'productImage',
        slots: {title: 'productImage'},
        scopedSlots: {customRender: 'customRenderImgge'},
        width: "60px"
    },
    // 名称
    {title: '产品名', dataIndex: 'productName'},
    // 产品信息
    {
        dataIndex: 'productInfo',
        // key: 'productInfo',
        slots: { title: 'productInfo' },
        scopedSlots: { customRender: 'customRenderProductInfo' },
        width: "180px"
    },

    // 产品价格
    {
        dataIndex: 'productPrice',

        title: "价格(原始价格)",
        align: "center",
        scopedSlots: {customRender: 'customRenderTag'},
    },
    // 节省金额
    {
        dataIndex: "productSavePrice",
        title: "节省金额",
        align: "center",
    },
   // 最终价格
    {
        dataIndex: 'productDealPrice',
        title: '最终价格',
        scopedSlots: {customRender: 'customRenderTag'},
    },
    // 折扣信息
    {
        dataIndex: 'productCoupon',
        title: "折扣信息",
    },
    // 数据来源
    {
        dataIndex: 'source',
        title: "渠道",
        scopedSlots: {customRender: 'customRenderTag'},
    },
];




import { getLatestItemList, getLatestItemListByName } from "@/api/item_detail/item_detail"
import {sliceStr} from "@/utils/string_utils"

export default {
    components: {  },
    data() {
        return {
            data:[],
            columns,
            pagination: {
                position: "bottom"
            },
            innerColumns,
            innerData: {},
        };
    },
    methods: {
        callback(key) {
            console.log(key);
        },
        handleClick(record){
            console.log("click btn", record.id)
            this.$router.push({path:`/item_history/${record.id}`})
        },
        handleClickReview(record){
            this.$router.push({path:`/review_list/${record.productAsin}`})
        },
        handleClickOrigin(record){
            window.open(record.originUrl, "_blank")
        },
        handleExpand(expanded, record){
            console.log(record.productName)
            getLatestItemListByName({name: record.productName}).then(
                data=>{
                    this.innerData[record.productName] = data.data;
                }
            ).catch(err=>{
                console.log("getLatestItemListByName error: ", err)
            })
            
        },
        exportData(){
            var url = "/api/export-latest-emeet-item-data"
            const form = document.createElement('form');
            form.style.display = 'none';
            // form.setAttribute('target', '_blank');
            form.setAttribute('method', "get");
            form.setAttribute('action', url);
            var param = {}
            // input.setAttribute('type','hidden');
            // 对于get请求 最终会拼成http://192.168.66.183:13666/download?name=HAP.pdf
            // input.setAttribute('name', paramsKey);
            // input.setAttribute('value', paramsValue);
            for(var k in param){
                var input = document.createElement('input');
                input.setAttribute('name', k)
                input.setAttribute('value', param[k])
                form.appendChild(input);
            }
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        }
    },
    created(){
        getLatestItemList().then(
            (data)=>{
                this.data = data.data
            },
            (err) =>{
                console.log("request error", err)
            }
        )
    }
}
</script>
<style lang="less" scoped>
.container{
    margin: 30px 50px;
}

.card-panel{
    height: 200px;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
}

.white-pannel{
    background-color: white;
}

.condition-pannel{
    height: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.grid-image{
    width: 50px;
    height: 40px;
}

.tabel-content{
    margin-bottom: 50px;
    text-align: center;
}

.tab-panel{
    padding: 0 !important;
    margin: 0 !important;
}

.graph_cell{
    width: 200px;
    height: 80px;
}

.product-info{
    width: 150px;
}

.text-line{
    overflow: hidden;
    font-size: 10px;
}
</style>